
/** BUTTON */
.button 
	display: inline-block
	zoom: 1 /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline
	vertical-align: baseline
	margin: 0 2px
	outline: none
	cursor: pointer
	text-align: center
	text-decoration: none
	font: 14px/100% Arial, Helvetica, sans-serif
	padding: .5em 2em .55em
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3)
	@include border-radius(.5em)
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2)


.button:hover 
	text-decoration: none


.button:active 
	position: relative
	top: 1px


.button a 
	color: white
	text-decoration: none


.button a:hover 
	text-decoration: underline


.button.bigrounded 
	@include border-radius(2em)


.button.medium 
	font-size: 12px
	padding: .4em 1.5em .42em


.button.small 
	font-size: 11px
	padding: .2em 1em .275em

/* green */
.button.green 
	color: #e8f0de
	border: solid 1px #538312
	+gradient(#7db72f, #4e7d0e)


.button.green:hover 
	+gradient(#6b9d28, #436b0c)

.button.green:active 
	color: #a9c08c
	+gradient(#4e7d0e, #7db72f)

/* red */
.button.red 
	color: #faddde
	border: solid 1px #980c10
	+gradient(#ed1c24, #aa1317)

.button.red:hover 
	+gradient(#c9151b, #a11115)

.button.red:active 
	color: #de898c
	+gradient(#aa1317, #ed1c24)

/* blue */
.button.blue 
	color: #d9eef7
	border: solid 1px #0076a3
	+gradient(#00adee, #0078a5)

.button.blue:hover 
	+gradient(#0095cc, #00678e)

.button.blue:active 
	color: #80bed6
	+gradient(#0078a5, #00adee)

/* gray */
.button.gray 
	color: #e9e9e9
	border: solid 1px #555
	+gradient(#888, #575757)

.button.gray:hover 
	+gradient(#757575, #4b4b4b)

.button.gray:active 
	color: #afafaf
	+gradient(#575757, #888)

/* black */
.button.black 
	color: #d7d7d7
	border: solid 1px #333
	+gradient(#666, #000)

.button.black:hover 
	+gradient(#444, #000)

.button.black:active 
	+gradient(#000, #444)

/* orange */
.button.orange 
	color: #fef4e9
	border: solid 1px #da7c0c
	+gradient(#faa51a, #f47a20)

.button.orange:hover 
	+gradient(#f88e11, #f06015)

.button.orange:active 
	color: #fcd3a5
	+gradient(#f47a20, #faa51a)

/* white */
.button.white a 
	color: #606060

.button.white 
	color: #606060
	border: solid 1px #b7b7b7
	+gradient(#fff, #ededed)

.button.white:hover 
	+gradient(#fff, #dcdcdc)

.button.white:active 
	color: #999
	+gradient(#ededed, #fff)